<template>
  <div class="con" v-loading="loading">
      <div class="user">
          <div class="title">
              <i class="icon icon-shezhi "  style="float:left;" @click="EditUser"></i>
                <el-badge is-dot v-show="dotShow"><i class="icon icon-xiaoxi"  @click="msgProp = true,dotShow=false"></i></el-badge>
                <el-badge v-show="!dotShow"><i class="icon icon-xiaoxi"  @click="msgProp = true,dotShow=false"></i></el-badge>
          </div>
         <div class="info">
            <div class="headpro">
                <img v-if="datas.User!=null && datas.User.HeadIMG!=null"  :src="Host+datas.User.HeadIMG" alt="">
                <img v-else src="../../../static/img/1.png" alt="">
            </div>
            <div class="label">
                <span v-if="datas.User!=null">{{datas.User.CNName}}</span>
                <i v-if="datas.Gender==2" class="icon icon-xingbienv"></i>
                <i v-else class="icon icon-xingbienan"></i>
            </div>
         </div>
         <div class="list">
           <div class="row">
               <ul>
                   <li>
                       <div class="item">
                        <span v-if="datas.ParentSalesName!=''">{{datas.ParentSalesName}}</span>
                        <span v-else>无</span>
                        <span>上司</span>
                       </div>
                   </li>
                   <li>
                        <div class="item">
                       <span v-if="datas.ChildSales!=''">{{datas.ChildSales}}人</span>
                       <span v-else>0人</span>
                       <span>业务员</span>
                        </div>
                   </li>
                   <li>
                        <div class="item">
                       <span v-if="datas.AddCstNumber!=''">{{datas.AddCstNumber}}人</span>
                       <span v-else>0人</span>
                       <span>新增数</span>
                        </div>
                   </li>
               </ul>
           </div>
           <div class="row">
                <ul>
                   <li>
                       <div class="item">
                        <span v-if="datas.SalesVisitNumber!=''">{{datas.SalesVisitNumber}}人</span>
                        <span v-else>0人</span>
                        <span>回访数</span>
                       </div>
                   </li>
                   <li>
                        <div class="item">
                       <span v-if="datas.CstVisitNumber!=''">{{datas.CstVisitNumber}}人</span>
                       <span v-else>0人</span>
                       <span>到访数</span>
                        </div>
                   </li>
                   <li>
                        <div class="item">
                       <span v-if="datas.TransNumber!=''">{{datas.TransNumber}}人</span>
                       <span v-else>0人</span>
                       <span>成交数</span>
                        </div>
                   </li>
                </ul>
           </div>
           <div class="row"></div>
            
         </div>
      </div>
      <div class="tabbar">
          <div class="pere">
              <div class="cho">
                    <router-link to="/register">
                        <div style="width:100%;">
                            <i class="icon icon-dengji"></i>
                            <span>到访登记</span>
                        </div>
                    </router-link>
              </div>
              <div class="cho">
                  <router-link to="/Customer">
                    <div style="width:100%;">
                        <i class="icon icon-kehuguanli"></i>
                        <span>客户管理</span>
                    </div>
                  </router-link>
              </div>
              <div class="cho active">
                    <router-link to="/home">
                    <div style="width:100%;">
                        <i class="icon icon-icon-test"></i>
                        <span>用户中心</span>
                    </div>
                  </router-link>
              </div>
          </div>
      </div>
      <el-dialog title="消息" width="80%" :visible.sync="msgProp">
        <el-collapse accordion>

          <el-collapse-item :title="item.Title.substring(0,12)" :name="index" v-for="(item,index) in webDatas" :key="item.Title">
            <div>{{item.Content}}</div>
          </el-collapse-item>
          
        </el-collapse>
        <span slot="footer" class="dialog-footer">
          <el-button @click="msgProp = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="msgProp = false" size="mini">确 定</el-button>
        </span>
      </el-dialog>
      
      




      <el-dialog title="设置" width="90%" :visible.sync="setUp">
          <el-tabs type="border-card">
            <el-tab-pane label="用户信息">
                <div class="editu">
            <span style="text-align:left;display:block;width:100%;">用户名：</span>
            <div class="inp">
                <el-input v-model="userName"  size="small" disabled></el-input>
            </div>
          </div>
          <div class="editu">
            <span style="text-align:left;display:block;width:100%;">姓名：</span>
            <div class="inp">
                <el-input v-model="name"  placeholder="请输入姓名" size="small"></el-input>
            </div>
          </div>
          <div class="editu">
            <span style="text-align:left;display:block;width:100%;">电话：</span>
            <div class="inp">
                <el-input v-model="tel"  placeholder="请输入电话" size="small"></el-input>
            </div>
          </div>

            <el-upload
              class="upload-demo"
              ref="upload"
              :limit=1
              :action="url"
              :on-remove="handleRemove"
              :on-success="onSuccess"
              :on-error="onError"
              :file-list="fileList"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

            <div>
              <el-button @click="setUp = false" size="mini">取 消</el-button>
              <el-button type="primary" @click="Submit" size="mini">确 定</el-button>
            </div>
            
            </el-tab-pane>

            <el-tab-pane label="修改密码">
              <div class="editu">
                <span style="text-align:left;display:block;width:100%;">用户名：</span>
                <div class="inp">
                    <el-input v-model="userName"  size="small" disabled></el-input>
                </div>
              </div>
                <div class="editu">
                  <span style="text-align:left;display:block;width:100%;">旧密码：</span>
                  <div class="inp">
                      <el-input v-model="OldPwd"  placeholder="请输入旧密码" size="small" type="password"></el-input>
                  </div>
                </div>
                <div class="editu">
                  <span style="text-align:left;display:block;width:100%;">新密码：</span>
                  <div class="inp">
                      <el-input v-model="NewPwd"  placeholder="请输入新密码" size="small" type="password"></el-input>
                  </div>
                </div>
                <div>
                  <el-button @click="setUp = false" size="mini">取 消</el-button>
                  <el-button type="primary" @click="editPwd" size="mini">确 定</el-button>
                </div>
            </el-tab-pane>
          </el-tabs>
      </el-dialog>
  </div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "home",
  data() {
    return {
      loading: false,
      dotShow: false,
      Host: Api.hostname, //主机名
      datas: [],
      webDatas: [],
      fileList: [],
      filePath: "", //路径变量
      OldPwd: "", //旧密码
      NewPwd: "", //新密码
      userName: "",
      name: "",
      tel: "",
      url: Api.filePath, //上传接口地址
      msgProp: false,
      setUp: false
    };
  },
  mounted() {
    this.websocket();
    this.getHome();
  },
  methods: {
    websocket() {
      var me = this;
      if ("WebSocket" in window) {
        var ws = new WebSocket(
          Api.websocket + localStorage.Login + "/" + localStorage.Token
        );
        ws.onmessage = function(evt) {
          var data = evt.data;
          me.webDatas.unshift(JSON.parse(data));
          me.msgTip();
          me.dotShow = true;
        };
      } else {
        console.log("您的浏览器不支持 WebSocket!");
      }
    },
    msgTip() {
      this.$message({
        message: "您有最新消息未查看！",
        type: "success"
      });
    },
    getHome() {
      var me = this;
      this.$axios.get(Api.salehome).then(res => {
        if (res.data.isOK) {
          me.datas = res.data.data;
          localStorage.busID = res.data.data.User.BusinessID;
        } else {
          if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
            me.$router.push("/Login");
          } else {
            me.$message.error(res.data.msg);
          }
        }
      });
    },
    EditUser() {
      this.setUp = true;
      this.userName = this.datas.User.Login;
      this.name = this.datas.User.CNName;
      this.tel = this.datas.User.Tel;
      this.OldPwd='';
      this.NewPwd='';
      this.fileList=[]
    },
    Submit() {
      var me = this;
      me.loading = true;
      me.setUp = false;
      this.$axios
        .post(Api.editprofile, {
          CNName: me.name,
          Tel: me.tel,
          HeadIMG: me.filePath
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading = false;
            me.getHome();
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              me.loading = false;
              me.$router.push("/Login");
            } else {
              me.loading = false;
              me.$message.error(res.data.msg);
            }
          }
        });
    },
    //修改密码
    editPwd() {
      var me = this;
      me.loading = true;
      if(me.NewPwd!=''&&me.OldPwd!=''){
        me.setUp = false;
        this.$axios
        .post(Api.changepwd, {
          Login: me.userName,
          NewPwd: md5(me.NewPwd),
          OldPwd: md5(me.OldPwd),
          ValidOld: true
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading = false;
            localStorage.clear();
            me.$router.push("/Login");
            
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              me.loading = false;
              me.$router.push("/Login");
            } else {
              me.loading = false;
              me.$message.error(res.data.msg);
            }
          }
        });
      }else{
        me.loading = false;
        this.$message.error('密码不能为空');
      }
      
    },
    //上传成功
    onSuccess(response, file, fileList) {
      this.filePath = response.data.filePaht.substring(
        2,
        response.data.filePaht.length
      );
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    //上传失败
    onError() {
      this.$message.error("上传失败");
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    }
  }
};
</script>
<style scoped>
a {
  text-decoration: none;
}
.con {
  /* position: relative; */
  width: 100%;
  height: 100%;
}
.topnav {
  width: 100%;
  height: 45px;
  background-color: #35495e;
  line-height: 45px;
  color: #ffffff;
}
.topnav i {
  font-size: 25px;
  vertical-align: middle;
}
.topnav span {
  display: inline-block;
  height: 100%;
}
.user {
  width: 100%;
  height: calc(100% - 4.2rem);
}
.user .title {
  text-align: right;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.5rem;
  padding: 1rem;
}
.user .title i {
  height: 2rem;
  line-height: 2rem;
  font-size: 1.5rem;
}
.user .info {
  width: 100%;
  margin: 1.8rem 0;
}
.user .info .headpro {
  margin: auto;
  border-radius: 50%;
  width: 8.6rem;
  height: 8.6rem;
  /* border: 1px solid #999; */
}
.user .info .headpro img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  /* border: 4px solid rgba(64, 158, 255, 0.37); */
  box-shadow: 0px 0px 20px rgb(64, 158, 255);
}

.user .info .label span {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: block;
}
.user .info .label i {
  font-size: 1.7rem;
}

.tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4.2rem;
  border-top: 1px solid #c0bfc4;
  background-color: #f7f7fa;
}

.pere {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
}
.pere .cho {
  list-style: none;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  font-size: 1rem;
  margin-top: 0.6rem;
}
.pere .cho.active {
  color: #409eff;
}
.pere .cho.active i {
  color: #409eff !important;
}
.pere .cho.active span {
  color: #409eff;
}
.pere .cho i {
  display: block;
  font-size: 2rem;
  color: #999;
}
.pere .cho span {
  display: block;
  font-size: 0.5rem;
  color: #999;
}

.list {
  width: 100%;
  position: absolute;
  bottom: 0;
  margin-bottom: 7rem;
  /* box-shadow: 0 0 10px #888; */
}
.row {
  width: 100%;
  margin-bottom: 1rem;
}
.row ul {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
}
.row ul li {
  list-style: none;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  font-size: 1rem;
  margin-top: 0.3rem;
}
.row .item {
  min-width: 5rem;
  min-height: 5rem;
  margin: auto;
  /* border: 1px solid #000; */
}
.row .item span {
  display: block;
  font-size: 1rem;
}
.row .item span:first-child {
  margin: auto;
  line-height: 3rem;
  max-width: 6rem;
  min-height: 3rem;
  font-size: 1.4rem;
  color: #888;
}

.gray {
  color: #999;
}
.editu {
  margin-bottom: 10px;
}
</style>



